<template>
  <el-card v-if="isVirtualTrading" shadow="hover" style="margin-top: 20px; background: #fff7ed; border: 1px solid #fb923c;">
    <template #header>
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <div style="display: flex; flex-direction: column; gap: 8px;">
          <!-- 主标题行 -->
          <div style="display: flex; align-items: center; gap: 8px;">
            <el-icon color="#ea580c" size="20"><TrendCharts /></el-icon>
            <span style="color: #ea580c; font-weight: bold; font-size: 16px;">虚拟交易运行中</span>
            <el-tag type="success" size="default" style="margin-left: 8px; font-weight: bold;">
              {{ backtestSettings.symbol }}
            </el-tag>
          </div>
          <!-- 策略信息行 -->
          <div style="display: flex; align-items: center; gap: 8px; margin-left: 28px;">
            <el-tag type="warning" size="small">
              策略: {{ 
                backtestSettings.strategyType === 'ma_cross' ? 'MA交叉' :
                backtestSettings.strategyType === 'rsi' ? 'RSI策略' :
                backtestSettings.strategyType === 'bollinger' ? '布林带' : '自定义'
              }}
            </el-tag>
            <el-tag type="info" size="small">
              初始资金: ${{ backtestSettings.initialCapital.toLocaleString() }}
            </el-tag>
            <el-tag type="primary" size="small">
              数据源: 市场概览
            </el-tag>
            <el-tag 
              :type="virtualTradingResults.pnl >= 0 ? 'success' : 'danger'" 
              size="small"
              style="font-weight: bold;"
            >
              {{ virtualTradingResults.pnl >= 0 ? '+' : '' }}{{ virtualTradingResults.pnlPercent.toFixed(2) }}%
            </el-tag>
          </div>
        </div>
        <div style="display: flex; gap: 8px;">
          <el-button type="info" size="small" @click="exportVirtualTradingData" :disabled="!virtualTradingResults.trades.length" title="导出交易数据">
            <el-icon><Download /></el-icon> 导出数据
          </el-button>
          <el-button type="success" size="small" @click="manualSaveState" title="手动保存状态">
            <el-icon><Download /></el-icon> 保存状态
          </el-button>
          <el-button type="warning" size="small" @click="clearVirtualTradingState" title="清理保存的状态">
            <el-icon><Delete /></el-icon> 清理状态
          </el-button>
          <el-button type="danger" size="small" @click="stopVirtualTrading">
            <el-icon><VideoPause /></el-icon> 停止交易
          </el-button>
        </div>
      </div>
    </template>
    
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">交易对</div>
          <div class="stat-value" style="font-weight: bold; color: #ea580c; font-size: 16px;">{{ backtestSettings.symbol }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">当前价格</div>
          <div class="stat-value">${{ virtualTradingResults.currentPrice.toFixed(2) }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">现金余额</div>
          <div class="stat-value">${{ virtualTradingResults.cash.toFixed(2) }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">持仓数量</div>
          <div class="stat-value">{{ virtualTradingResults.position.toFixed(4) }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">持仓价值</div>
          <div class="stat-value">${{ (virtualTradingResults.position * virtualTradingResults.currentPrice).toFixed(2) }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">总资产</div>
          <div class="stat-value" style="font-weight: bold; color: #1890ff; font-size: 16px;">${{ virtualTradingResults.totalValue.toFixed(2) }}</div>
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 15px;">
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">策略类型</div>
          <div class="stat-value" style="font-weight: bold; color: #722ed1;">{{ 
            backtestSettings.strategyType === 'ma_cross' ? 'MA交叉' :
            backtestSettings.strategyType === 'rsi' ? 'RSI策略' :
            backtestSettings.strategyType === 'bollinger' ? '布林带' : 
            backtestSettings.strategyType === 'ml_strategy1' ? 'AI智能策略1' : '自定义'
          }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">策略参数</div>
          <div class="stat-value" style="font-size: 12px; font-weight: bold;">
            <span v-if="backtestSettings.strategyType === 'ma_cross'" style="color: #1890ff;">
              快{{ backtestSettings.fastMAPeriod }} / 慢{{ backtestSettings.slowMAPeriod }}
            </span>
            <span v-else-if="backtestSettings.strategyType === 'rsi'" style="color: #52c41a;">
              RSI{{ backtestSettings.rsiPeriod }} ({{ backtestSettings.oversold }}-{{ backtestSettings.overbought }})
            </span>
            <span v-else-if="backtestSettings.strategyType === 'bollinger'" style="color: #fa8c16;">
              BB{{ backtestSettings.bbPeriod }}, ±{{ backtestSettings.bbStdDev }}σ
            </span>
            <span v-else-if="backtestSettings.strategyType === 'vwap'" style="color: #722ed1;">
              VWAP ({{ backtestSettings.vwapDataSource === 'api' ? 'API' : '网页' }}数据)
              <div style="font-size: 10px; color: #e6a23c;">目标: 20%盈利</div>
            </span>
            <span v-else-if="backtestSettings.strategyType === 'ml_strategy1'" style="color: #722ed1;">
              ML置信度{{ (backtestSettings.mlConfidenceThreshold * 100).toFixed(0) }}%, {{ backtestSettings.mlFeatureWeighting }}
            </span>
            <span v-else style="color: #722ed1;">自定义策略</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">盈亏金额</div>
          <div class="stat-value" :class="virtualTradingResults.pnl >= 0 ? 'profit' : 'loss'">
            {{ virtualTradingResults.pnl >= 0 ? '+' : '' }}${{ virtualTradingResults.pnl.toFixed(2) }}
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">盈亏率</div>
          <div class="stat-value" :class="virtualTradingResults.pnlPercent >= 0 ? 'profit' : 'loss'">
            {{ virtualTradingResults.pnlPercent >= 0 ? '+' : '' }}{{ virtualTradingResults.pnlPercent.toFixed(2) }}%
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">交易次数</div>
          <div class="stat-value">{{ virtualTradingResults.currentSessionTradesCount }}</div>
          <div class="stat-detail" style="font-size: 10px; color: #666;">
            当前会话: {{ virtualTradingResults.currentSessionTradesCount }} | 历史总计: {{ virtualTradingResults.trades.length }}
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="virtual-stat-item">
          <div class="stat-label">风险控制</div>
          <div class="stat-value" style="font-size: 12px; font-weight: bold;">
            <span style="color: #f5222d;">止损{{ backtestSettings.stopLoss }}%</span> / 
            <span style="color: #52c41a;">止盈{{ backtestSettings.takeProfit }}%</span>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 实时状态信息行 -->
    <el-row :gutter="20" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 6px;">
      <el-col :span="6">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon color="#52c41a" size="16"><Clock /></el-icon>
          <span style="font-size: 12px; color: #666;">运行状态:</span>
          <el-tag type="success" size="small">正在运行</el-tag>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon color="#1890ff" size="16"><Connection /></el-icon>
          <span style="font-size: 12px; color: #666;">数据来源:</span>
          <el-tag 
            :type="binanceSymbol === backtestSettings.symbol.replace('/', '') && binanceCurrentPrice > 0 ? 'success' : 'info'" 
            size="small"
          >
            {{ binanceSymbol === backtestSettings.symbol.replace('/', '') && binanceCurrentPrice > 0 ? 'Binance实时' : '市场数据' }}
          </el-tag>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon color="#fa8c16" size="16"><Warning /></el-icon>
          <span style="font-size: 12px; color: #666;">风险状态:</span>
          <el-tag :type="backtestSettings.riskControl ? 'success' : 'warning'" size="small">
            {{ backtestSettings.riskControl ? '已开启' : '已关闭' }}
          </el-tag>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-icon color="#722ed1" size="16"><DataAnalysis /></el-icon>
          <span style="font-size: 12px; color: #666;">最大回撤:</span>
          <el-tag :type="virtualTradingResults.currentDrawdown > backtestSettings.initialCapital * 0.1 ? 'danger' : 'info'" size="small">
            ${{ virtualTradingResults.currentDrawdown?.toFixed(2) || '0.00' }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    
    <!-- 最近交易记录 -->
    <div v-if="virtualTradingResults.trades.length > 0" style="margin-top: 20px;">
      <el-divider>最近交易记录</el-divider>
      <div style="max-height: 150px; overflow-y: auto;">
        <div 
          v-for="trade in virtualTradingResults.trades.slice(-5).reverse()" 
          :key="trade.id"
          class="trade-record"
          :class="trade.type"
        >
          <span class="trade-type">{{ trade.type === 'buy' ? '买入' : '卖出' }}</span>
          <span class="trade-price">${{ trade.price.toFixed(2) }}</span>
          <span class="trade-amount">{{ trade.amount.toFixed(4) }}</span>
          <span class="trade-reason">{{ trade.reason }}</span>
          <span class="trade-time">{{ trade.time }}</span>
          <span v-if="trade.profit !== undefined" class="trade-profit" :class="trade.profit >= 0 ? 'profit' : 'loss'">
            {{ trade.profit >= 0 ? '+' : '' }}${{ trade.profit.toFixed(2) }}
          </span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { 
  TrendCharts, 
  DataAnalysis, 
  Download, 
  Delete, 
  VideoPause, 
  Connection,
  Clock,
  Warning
} from '@element-plus/icons-vue'

export default {
  name: 'VirtualTradingPanel',
  components: {
    TrendCharts,
    DataAnalysis,
    Download,
    Delete,
    VideoPause,
    Connection,
    Clock,
    Warning
  },
  props: {
    isVirtualTrading: {
      type: Boolean,
      required: true
    },
    backtestSettings: {
      type: Object,
      required: true
    },
    virtualTradingResults: {
      type: Object,
      required: true
    },
    binanceSymbol: {
      type: String,
      required: true
    },
    binanceCurrentPrice: {
      type: Number,
      required: true
    }
  },
  emits: ['stop-virtual-trading', 'export-virtual-trading-data', 'manual-save-state', 'clear-virtual-trading-state'],
  setup(props, { emit }) {
    const stopVirtualTrading = () => {
      emit('stop-virtual-trading')
    }

    const exportVirtualTradingData = () => {
      emit('export-virtual-trading-data')
    }

    const manualSaveState = () => {
      emit('manual-save-state')
    }

    const clearVirtualTradingState = () => {
      emit('clear-virtual-trading-state')
    }

    return {
      stopVirtualTrading,
      exportVirtualTradingData,
      manualSaveState,
      clearVirtualTradingState
    }
  }
}
</script>

<style scoped>
.virtual-stat-item {
  text-align: center;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #fde68a;
}

.virtual-stat-item .stat-label {
  font-size: 12px;
  color: #92400e;
  margin-bottom: 5px;
}

.virtual-stat-item .stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #451a03;
}

.virtual-stat-item .stat-value.profit {
  color: #14b143;
}

.virtual-stat-item .stat-value.loss {
  color: #ef232a;
}

.trade-record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 5px;
  border-radius: 4px;
  font-size: 12px;
  background: #fff;
  border-left: 3px solid #ddd;
}

.trade-record.buy {
  border-left-color: #14b143;
  background: #f0f9f4;
}

.trade-record.sell {
  border-left-color: #ef232a;
  background: #fef2f2;
}

.trade-type {
  font-weight: bold;
  min-width: 40px;
}

.trade-price {
  min-width: 60px;
  color: #1f2937;
}

.trade-amount {
  min-width: 60px;
  color: #6b7280;
}

.trade-reason {
  flex: 1;
  text-align: center;
  color: #374151;
}

.trade-time {
  min-width: 60px;
  color: #9ca3af;
  font-size: 11px;
}

.trade-profit {
  min-width: 60px;
  font-weight: bold;
  text-align: right;
}

.trade-profit.profit {
  color: #14b143;
}

.trade-profit.loss {
  color: #ef232a;
}
</style>